<template>
  <div class="tixian-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="开始结束月份:" prop="weihuren">
          <el-date-picker v-model="search.dateRang" type="daterange" range-separator="到" start-placeholder="开始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" @change="getLists" />
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-select v-model="search.status" class="m-2" placeholder="状态" size="large" @change="getLists" clearable>
            <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户id:" prop="userid">
          <el-input v-model="search.userid" size="large" placeholder="请输入内容" @change="getLists" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作人:" prop="serveruserid">
          <el-select v-model="search.serveruserid" class="m-2" placeholder="操作人" size="large" @change="getLists"
            clearable>
            <el-option v-for="item in persons" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
      <el-table-column prop="id" label="编号" align="center" width="80px" header-align="center"></el-table-column>

      <el-table-column prop="createtime" label="创建时间" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="userid" label="用户id" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="price" label="金额" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="status" label="状态" align="center" header-align="center">
        <template #default="scope">
          <div :style="scope.row.statusStyle">{{ scope.row.statusText }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="tixian_context" label="提现备注" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="serverusername" label="操作人" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="caozuocontext" label="操作备注" align="center" header-align="center"> </el-table-column>

      <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.status == '0'" @click.stop="shenheFun(scope.row.id, 1)"
            size="small">同意</el-button>
          <el-button type="cancel" v-if="scope.row.status == '0'" @click.stop="shenheFun(scope.row.id, 2)"
            size="small">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px; overflow: hidden">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNo" :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
      </el-pagination>
    </div>
    <!-- 添加编辑文章类型 -->
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getTixianList, updateTixianZhuangtai } from '@api/tixian'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/user'
import { getServerUserList } from '@api/person'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)
const lists = ref([])

//获取列表
const statusTextArr = ref(['未处理', '已同意', '已拒绝'])
const statusStyleArr = ref(['color: var(--dangerColor)', 'color: var(--successColor)', 'color: var(--dangerColor)'])
async function getLists() {
  let { status, serveruserid, dateRang, userid } = search.value
  let searchOpt = {
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }

  if (status) {
    searchOpt.status = status
  }

  if (serveruserid) {
    searchOpt.serveruserid = serveruserid
  }

  if (userid) {
    searchOpt.userid = userid
  }

  if (dateRang && dateRang.length) {
    searchOpt.starttime = dateRang[0]
    searchOpt.endtime = dateRang[1]
  }

  let res = await getTixianList(searchOpt)

  if (res.code == 200) {
    lists.value = res.data.map((v) => {
      return {
        ...v,
        statusText: statusTextArr.value[parseInt(v.status)],
        statusStyle: statusStyleArr.value[parseInt(v.status)]
      }
    })
    total.value = parseInt(res.msg)
  }
}

// 搜索
const time = new Date()
const yearMonthDate = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
const nextYearMonthDate = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
const searchForm = ref()
const search = ref({
  status: '',
  serveruserid: '',
  dateRang: []
})

const resetFun = () => {
  search.value = {
    status: '',
    serveruserid: '',
    dateRang: []
  }
  getLists()
}

//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNo改变
function handleCurrentChange(val) {
  pageNo.value = val
  getLists()
  // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
  pageNo.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNo.value = val
  getLists()
}

//查看详情
const rowCli = (row, column) => {
  // router.push({ path: '/home/orderDetail', query: { order_sn: row.order_sn } })
}

// 员工列表
const persons = ref([])
const getPersons = async () => {
  let res = await getServerUserList()

  if (res.code == 200) {
    persons.value = res.data.map((v) => {
      return {
        label: v.username,
        value: v.id + ''
      }
    })
  }
}

// 获取书籍类型
const statusArr = ref([
  {
    label: '未处理',
    value: '0'
  },
  {
    label: '已同意',
    value: '1'
  },
  {
    label: '已拒绝',
    value: '2'
  }
])

const shenheFun = (id, status) => {
  let title = status == '1' ? '同意' : '拒绝'
  ElMessageBox.prompt(`请填写${title}备注`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
    // inputPattern:
    // /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    // inputErrorMessage: 'Invalid Email',
  })
    .then(async ({ value }) => {
      let res = await updateTixianZhuangtai({ id, status, context: value })

      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: `操作成功!`
        })

        getLists()
      }
    })
    .catch(() => { })
}

onMounted(() => {
  getLists()
  getPersons()
})
</script>
<style lang="scss" scoped>
.order-box {
  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;

        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
